<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>求职就业管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <div class="layui-header" style="font-weight: bold;">
        <div class="layui-logo layui-bg-black" style="letter-spacing: 3px;">求职就业管理系统</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item" lay-unselect lay-header-event="menuChange">
                <a href="#" title="收起菜单"><i id="leftEnumIcon" class="layui-icon layui-icon-shrink-right"></i></a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect lay-header-event="menuRefresh">
                <a href="#" title="刷新页面"><i class="layui-icon layui-icon-refresh-3"></i></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide-xs" lay-unselect lay-header-event="menuNote">
                <a href="#" title="备忘录"><i class="layui-icon layui-icon-note"></i></a>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect lay-header-event="menuFull">
                <a href="#" title="全屏">
                    <i class="layui-icon layui-icon-screen-full" id="tool-screen-full"></i>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:void(0);">
                    <input type="hidden" id="userId" th:value="${session.account.id}" /> <!-- 登录用户ID -->
                    <img th:src="@{'data:image/jpeg;base64,' + ${session.avatarBase64}}" class="layui-nav-img" alt="头像">
                    <span th:text="${session.account.info.username}"></span>
                </a>
                <dl class="layui-nav-child" style="text-align: center;">
                    <dd lay-header-event="aboutMe"><a href="#">个人资料</a></dd>
<!--                    <dd lay-header-event="setPass"><a href="#">编辑资料</a></dd>-->
                    <dd lay-header-event="logout"><a href="#">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-unselect lay-header-event="menuAbout">
                <a href="#" title="更多信息">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <!-- 左侧导航菜单 -->
    <div class="layui-side layui-bg-black" style="font-weight: bold;">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" style="letter-spacing: 1px;" lay-accordion id="indexSideMenu">
                <!--遍历所有一级菜单-->
                <li class="layui-nav-item" th:each="menu : ${menuList}" th:if="${menu.parentId == 0}">
                    <a href="javascript:void(0);" th:data-id="${menu.id}" th:data-url="${menu.path}" th:data-name="${menu.name}"
                       th:attr="lay-aside-event=${#lists.size(menu.children) > 0} ? null : 'menuAction'">
                        <i th:class="${menu.icon}"></i> <cite th:text="${menu.name}"></cite>
                    </a>
                    <!--如果一级菜单有子菜单，则生成二级菜单-->
                    <dl class="layui-nav-child" th:if="${#lists.size(menu.children) > 0}">
                        <!--遍历当前一级菜单的所有子菜单(二级菜单)-->
                        <dd th:each="childMenu : ${menu.children}">
                            <a href="javascript:void(0);" th:data-id="${childMenu.id}" th:data-url="${childMenu.path}" th:data-name="${childMenu.name}" lay-aside-event="menuAction">
                                <i th:class="${childMenu.icon}"></i> <cite th:text="${childMenu.name}"></cite>
                            </a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div class="layui-tabs layui-hide-v" id="demoTabs" lay-options="{closable: true, headerMode:'scroll'}" style="display: flex; flex-direction: column; height: 100%;">
            <ul class="layui-tabs-header" style="flex-shrink: 0;">
                <li lay-id="0" lay-closable="false">欢迎页面</li>
            </ul>
            <div class="layui-tabs-body" style="flex-grow: 1; overflow: auto; padding: 0;">
                <div class="layui-tabs-item">
                    <iframe src="/admin/welcome" style="border: none;position: absolute;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;margin-top: 40px;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['layer', 'tabs', 'jquery', 'util', 'dropdown', 'form'], function () {
        let layer = layui.layer;        // 弹出层
        let tabs = layui.tabs;          // 标签页
        let $ = layui.jquery;           // jQuery
        let util = layui.util;          // 工具模块
        let dropdown = layui.dropdown;  // 下拉菜单
        let form = layui.form;          // 表单组件
        let device = layui.device();    // 浏览器信息

        if (device.mobile) {
            layer('当前设备为移动设备，建议使用电脑浏览');
        }

        // 使用jQuery简化获取
        const userId = $('#userId').val();

        // 页面顶部工具栏点击事件
        util.event('lay-header-event', {
            menuChange: function () {   // 边栏伸缩
                let btn = $('#leftEnumIcon');
                if (btn.hasClass('layui-icon-shrink-right')) {
                    btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                    $(".layui-side").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '0px'});
                } else if (btn.has('layui-icon-spread-left')) {
                    btn.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                    $(".layui-side").animate({width: 'toggle'});
                    $(".layui-body").animate({left: '200px'});
                }
            },
            menuRefresh: function () {  // 刷新页面
                let activeTab = $('#demoTabs .layui-tabs-header li.layui-this');    // 获取当前激活的 tab 标签页
                if (activeTab.length) {
                    let tabId = activeTab.attr('lay-id');
                    // 获取对应的 iframe 元素
                    let iframe = $('#demoTabs .layui-tabs-body .layui-tabs-item[lay-id="' + tabId + '"] iframe');
                    if (iframe.length) {
                        iframe[0].contentWindow.location.reload();  // 刷新 iframe 页面
                    }
                }
            },
            menuNotice: function () {
                if (tabs.getHeaderItem('demoTabs', 'menu_notice').length) {
                    // 如果这个标签页存在，就切换到这个标签页
                    layui.tabs.change('demoTabs', 'menu_notice');
                } else {
                    // 如果这个标签页不存在，就添加新标签为这个标签页
                    tabs.add('demoTabs', {
                        title: '消息通知',
                        content: '<iframe src="/notification-list" style="border: none;position: absolute;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;margin-top: 40px;"></iframe>',
                        id: 'menu_notice',
                        done: function (data) {
                            // 给新标签头添加上下文菜单
                            dropdown.render($.extend({}, dropdownInst.config, {
                                elem: data.headerItem // 新标签头元素
                            }));
                        }
                    });
                }
            },
            menuAbout: function () {
                layer.open({
                    type: 1,
                    title: '更多信息',
                    offset: 'r',
                    anim: 'slideLeft', // 从右往左
                    area: ['25%', '100%'],
                    shade: 0.5,
                    shadeClose: true,
                    content: '<div style="padding: 20px;">' +
                        '<p>项目：求职就业管理系统</p>' +
                        '<p>gitee：https://gitee.com/LostInLinearPast/job-hunting-system</p>' +
                        '</div>'
                });
            },
            menuNote: function () {
                // 存储的键名
                const STORAGE_KEY = 'note';

                layer.open({
                    type: 1,
                    skin: 'layui-layer-win10',
                    shade: 0.5,
                    area: ['60%', '60%'],
                    title: '*无标题 - 记事本',
                    content: [
                        '<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
                        // 自定义菜单，此处仅作样式演示，具体功能尚未实现
                        [
                            '<a href="javascript:;">文件</a>&ensp;',
                            '<a href="javascript:;" >编辑</a>&ensp;',
                            '<a href="javascript:;" >格式</a>&ensp;',
                            '<a href="javascript:;" >查看</a>&ensp;',
                            '<a href="javascript:;" >帮助</a>',
                        ].join('   '),
                        '</div>',
                        '<textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;" id="myNote"></textarea>'
                    ].join(''),
                    success: function (layero, index) { // 弹窗加载完成后回调
                        // 从本地存储中读取之前保存的内容
                        const storageData = layui.data('DrugManageData');
                        const content = storageData[STORAGE_KEY] || '';

                        // 设置到文本域中
                        const textarea = layero.find('#myNote');
                        textarea.val(content);

                        // 自动聚焦到文本域
                        textarea.focus();
                    },
                    cancel: function (index, layero) {
                        // 获取文本域内容
                        const content = layero.find('#myNote').val();

                        // 保存到本地存储
                        layui.data('DrugManageData', {
                            key: STORAGE_KEY,
                            value: content
                        });
                        layer.msg('内容已保存');
                    }
                });
            },
            menuFull: function () { // 全屏显示
                if (!document.fullscreenElement) {
                    document.documentElement.requestFullscreen();
                    document.getElementById("tool-screen-full").setAttribute("class", "layui-icon layui-icon-screen-restore");
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                        document.getElementById("tool-screen-full").setAttribute("class", "layui-icon layui-icon-screen-full");
                    }
                }
            },
            aboutMe: function() {
                // 更健壮的错误处理
                if(!userId || userId === '0') {
                    layer.msg('用户信息失效，请重新登录', {icon: 5});
                    setTimeout(() => {
                        location.href = '/login';  // 跳转到登录页
                    }, 1500);
                    return;
                }

                layer.open({
                    type: 2,
                    title: '我的资料',
                    shadeClose: true,  // 允许点击遮罩关闭
                    maxmin: true,      // 允许最大化/最小化
                    area: ['80%', '90%'],  // 响应式尺寸
                    content: `/admin/info`  // ES6模板字符串语法
                });
            },
            logout: function () { // 退出登录
                layer.confirm('确定退出登录嘛?', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: '/api/account/logout',
                        type: 'POST',
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg('退出成功', {icon: 1});
                                setTimeout(() => {
                                    window.location = '/login';
                                }, 2000)
                            } else {
                                layer.msg('退出失败', {icon: 2});
                            }
                        },
                        error: function () {
                            layer.msg('Ajax请求异常', {icon: 0});
                        }
                    });
                }, function () {
                    layer.msg('退出登录操作已取消');
                });
            }
        });

        // 页面左侧菜单点击事件
        util.event('lay-aside-event', {
            menuAction: function (othis) {
                // 通过 lay-id 判断当前标签页是否存在，通过 DOM 元素的 dataset 属性获取元素的属性值
                if (tabs.getHeaderItem('demoTabs', 'menu' + othis[0].dataset.id).length) {
                    // 如果这个标签页存在，就切换到这个标签页
                    layui.tabs.change('demoTabs', 'menu' + othis[0].dataset.id);
                } else {
                    // 如果这个标签页不存在，就添加新标签为这个标签页
                    tabs.add('demoTabs', {
                        title: othis[0].dataset.name,
                        content: '<iframe src="' + othis[0].dataset.url + '" style="border: none;position: absolute;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;margin-top: 40px;"></iframe>',
                        id: 'menu' + othis[0].dataset.id,
                        done: function (data) {
                            // 给新标签头添加上下文菜单
                            dropdown.render($.extend({}, dropdownInst.config, {
                                elem: data.headerItem // 新标签头元素
                            }));
                        }
                    });
                }
            }
        });

        // 为标签头添加上下文菜单
        let dropdownInst = dropdown.render({
            elem: '#demoTabs .layui-tabs-header>li',
            trigger: 'contextmenu',
            data: [{
                title: '关闭当前标签页',
                action: 'close',
                mode: 'this',
            }, {
                type: '-'
            }, {
                title: '关闭其他标签页',
                action: 'close',
                mode: 'other'
            }, {
                title: '关闭右侧标签页',
                action: 'close',
                mode: 'right'
            }, {
                title: '关闭所有标签页',
                action: 'close',
                mode: 'all'
            }],
            click: function (data, othis, event) {
                let index = this.elem.index(); // 获取活动标签索引
                if (data.action === 'close') { // 关闭标签操作
                    if (data.mode === 'this') {
                        tabs.close('demoTabs', index); // 关闭当前标签
                    } else {
                        tabs.closeMult('demoTabs', data.mode, index); // 批量关闭标签
                    }
                }
            }
        });


    });
</script>
</body>
</html>